<?xml version="1.0" encoding="UTF-8" ?>
<html>
  <head>
    <meta name="layout" content="hctrauma" />
    
<%-- el jQuery se agarra a las pinias con el prototype que inclui 
    en layout.hctrauma para pedir la cantidad de estudios img.
    
    <g:javascript src="jquery-1.3.2.min.js" />
    <g:javascript>
      $(document).ready(function() {
         $("a.clone").click(function() {
            //alert("Hello world!");
            //alert( $(this).parent() );
            
            //alert( $(this).parent().parent().children()[0] );
            
            //$("body").append( $(this).parent().parent().children()[0].clone() );
//            $(this).parent().parent().prepend(  $(this).parent().parent().clone() );
// FIXME: pintar lo que quiero clonar
            //$(this).parent().parent().style.backgroundColor = "#ffff00";
            
            // this.parent es <div class="multiple">
            // this.parent.leftSibling es <span class="content"> ... el nodo que quiero clona
            
            //$(this).parent().parent().css('background','#ffff00');
            
            alert( $(this).parent().previousSiblings() );
            
            $(this).parent().previousSiblings().css('boder','3px solid #ffff00');
            
            //alert("pepe");
            
         });
      });
    </g:javascript>
    
--%>
    <style>
    #content, #left, #right, #bottom {
      vertical-align: top;
    }
    #left {
      width: 50%;
    }
    #right {
      width: 50%;
    }
    
    .OBSERVATION .label, .EVALUATION .label, .INSTRUCTION .label, .ACTION .label {
      font-size: 14px;
      font-weight: bold;
      background-color: #e0e0e0;
      padding: 3px;
      /* padding-left: 6px; */ /* Ahora todo alineado a la izq sin identacion */
    }

<%--
    .OBSERVATION, .EVALUATION {
      width: 50%;
      /* border: 1px solid #ffff00; */
      float: left;
      background-color: #ffdddd;
    }
    .INSTRUCTION, .ACTION {
      width: 50%;
      /* border: 1px solid #ffff00; */
      float: right;
      background-color: #ddddff;
    }
--%>

    .CLUSTER {
      /*margin-left: 10px;*/ /* Ahora todo alineado a la izq sin identacion */
      margin-bottom: 3px;
      font-weight: bold;
      background-color: #aa99ff;
      /*padding: 3px;*/
      border: 1px solid #6633ff;
    }    
    .CLUSTER .label {
      padding: 3px;
      /*padding-left: 6px;*/ /* Ahora todo alineado a la izq sin identacion */
      background-color: #7766ff;
      font-size: 13px;
    }
    .CLUSTER .content {
      padding: 3px;
      display: block;
    }
    
    .ELEMENT {
      /*margin-left: 10px;*/  /* Ahora todo alineado a la izq sin identacion */
      font-weight: normal;
      margin-bottom: 3px;
      /*padding: 3px;*/
      background-color: #ffaa99;
      border: 1px solid #ff3333;
    }
    .ELEMENT .label {
      padding: 3px;
      /*padding-left: 6px;*/
      /*margin-right: 5px;*/
      background-color: #ff7766;
      font-size: 12px;
    }
    .ELEMENT .content {
      padding: 3px;
      display: block;
    }

    .label {
      /*font-weight: bold;*/
      display: block;
      margin-bottom: 2px;
    }

    
    /*******************************************************/
    /* Para los boolean que el SI NO tenga el mismo largo. */
    label input {
      vertical-align: middle;
    }
    label span {
      /*background-color: #00ff00;*/ /* Para distinguir a que se aplica, lo muestra verde. */
      width: 30px;
      height: 22px;
      text-align: right;
      display: inline-block;
    }
    label:hover {
      background-color: #ddddff;
    }
    /* / Para los boolean que el SI NO tenga el mismo largo. */
    /*********************************************************/

    #br_bottom {
      clear: both;
    }

    .active {
      font-weight: bold;
    }
    .multiple {
      text-align: right;
    }
    .slot {
      border: 2px solid red;
      padding: 2px;
    }
    .archetype {
      /* background-color: #ddddff; */
      padding: 10px;
      border: 1px solid #dddd80;
    }
    .field {
      padding: 10px;
      border: 1px solid #80dddd;
    }
    
    
    /* --- NAVBAR ----------------------------- */ 
  #navbar
  {          
    width: 100%;
    /*padding-top: 5px;*/
    line-height: normal;
    font-size: 12px;
    margin-top: 0px;
    clear: both;
    /*background: #e0e0e0;*/
    text-align: left;
  }
  
  #navbar a {
     padding: 0px;
     text-decoration: none;
     color: #000;
     padding: 4px 10px 2px 10px;
     width: 100%;
  }
  
  #navbar ul {
     margin: 0;
     padding: 5px 0px 2px 20px;
     list-style: none;
     /*border-bottom: solid 1px #bbb;*/
  }
  
  #navbar li {
     margin-right: 1px;
     padding: 4px 0px 2px 0px;
     display: inline;
     color: #666;
     border: solid 1px #000000;
     border-bottom: 1px solid #000000;
     background-color: #efefef;
  }
  
  #navbar li.active {
      
      
      border: 1px solid #000000;
      border-bottom: 1px solid #ffffdd;
      font-weight: bold;
      background-color: #ffffdd;
  }
  
    textarea {
      /* width: 600px; */
      width: 100%;
      height: 75px;
    }
    select {
      width: 160px;
    }
    </style>
  </head>
  <body>    
    <%-- ${archetypeList} --%>
    
    <%-- SUBMENU DE SECCIONES SI EXISTEn --%>
    <g:if test="${subsections.size()>1}">
      <div id="navbar">
        <ul>
          <g:each in="${subsections}" var="subsection">
            <li ${((template.id==subsection)?'class="active"':'')}>
              <g:link controller="guiGen" action="generarTemplate" params="[templateId:subsection]">
                <g:message code="${'section.'+subsection}" />
              </g:link>
            </li>
          </g:each>
        </ul>
      </div>
    </g:if>
    
    <g:form action="save" class="ehrform" method="post" enctype="multipart/form-data">
    
      <input type="hidden" name="templateId" value="${template.id}" />
      TemplateId: ${template.id}<br/>
      <table>
        <tr>
          <td colspan="2" id="content">
            <g:each in="${template.getArchetypesByZone('content')}" var="archRef">
              <g:each in="${archRef.getReferencedConstraints()}" var="node">
                <g:set var="strclass" value='${node.getClass().getSimpleName()}'/>
                <g:set var="templateName" value="${strclass[0].toLowerCase()+strclass.substring(1)}" />
                <g:render template="templates2/${templateName}"
                          model="[(templateName): node,
                                  archetype: archRef.getReferencedArchetype(),
                                  archetypeService: archetypeService]" />
              </g:each>
            </g:each>
          </td>
        </tr>
        <tr>
          <td id="left">
            <g:each in="${template.getArchetypesByZone('left')}" var="archRef">
              <g:each in="${archRef.getReferencedConstraints()}" var="node">
                <g:set var="strclass" value='${node.getClass().getSimpleName()}'/>
                <g:set var="templateName" value="${strclass[0].toLowerCase()+strclass.substring(1)}" />
                <g:render template="templates2/${templateName}"
                          model="[(templateName): node,
                                  archetype: archRef.getReferencedArchetype(),
                                  archetypeService: archetypeService]" />
              </g:each>
            </g:each>
          </td>
          <td id="right">
            <g:each in="${template.getArchetypesByZone('right')}" var="archRef">
              <g:each in="${archRef.getReferencedConstraints()}" var="node">
                <g:set var="strclass" value='${node.getClass().getSimpleName()}'/>
                <g:set var="templateName" value="${strclass[0].toLowerCase()+strclass.substring(1)}" />
                <g:render template="templates2/${templateName}"
                          model="[(templateName): node,
                                  archetype: archRef.getReferencedArchetype(),
                                  archetypeService: archetypeService]" />
              </g:each>
            </g:each>
          </td>
        </tr>
        <tr>
          <td colspan="2" id="bottom">
            <g:each in="${template.getArchetypesByZone('bottom')}" var="archRef">
              <g:each in="${archRef.getReferencedConstraints()}" var="node">
                <g:set var="strclass" value='${node.getClass().getSimpleName()}'/>
                <g:set var="templateName" value="${strclass[0].toLowerCase()+strclass.substring(1)}" />
                <g:render template="templates2/${templateName}"
                          model="[(templateName): node,
                                  archetype: archRef.getReferencedArchetype(),
                                  archetypeService: archetypeService]" />
              </g:each>
            </g:each>
          </td>
        </tr>
      </table>

 <%--
      <g:each in="${template.rootArchetype.getReferencedConstraints()}" var="node">
        
          <g:set var="strclass" value='${node.getClass().getSimpleName()}'/>
          <g:set var="templateName" value="${strclass[0].toLowerCase()+strclass.substring(1)}" />
          <g:render template="templates2/${templateName}"
                    model="[(templateName): node,
                            archetype: template.rootArchetype.getReferencedArchetype(),
                            archetypeService: archetypeService]" />
        
      </g:each>
      
      <g:each in="${template.includedArchetypes}" var="archRef">
        <g:each in="${archRef.getReferencedConstraints()}" var="node">
            <!--
            <span class="label">
              <g:displayLabel archetypeId="${archRef.id}" nodePath="${node.path()}" />
            </span>
            -->            
            <g:set var="strclass" value='${node.getClass().getSimpleName()}'/>
            <g:set var="templateName" value="${strclass[0].toLowerCase()+strclass.substring(1)}" />
            <g:render template="templates2/${templateName}"
                      model="[(templateName): node,
                              archetype: archRef.getReferencedArchetype(),
                              archetypeService: archetypeService]" />
        </g:each>
      </g:each>
 --%>
      
      <br/><br id="br_bottom" />
      <g:submitButton name="doit" value="Guardar" />
    </g:form>
  </body>
</html>